<template>
    <div class="welcome step-box">
        <!-- <el-scrollbar class="h_v"> -->
        <el-form ref="ruleFormRef" :disabled="pageType === 'look'" :model="formData" class="formRef">
            <el-form-item label="欢迎语设置" label-width="86px">
                <el-switch v-model="formData.welcome_flag" :active-value="1" :inactive-value="2" />
            </el-form-item>
            <el-form-item v-show="formData.welcome_flag != 2" label-width="88px">
                <el-radio-group v-model="formData.welcome_type">
                    <el-radio :label="1">新建欢迎语</el-radio>
                    <el-radio :label="2">默认欢迎语</el-radio>
                    <el-radio :label="3">已有欢迎语</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-show="formData.welcome_type != 2 && formData.welcome_flag != 2" prop="content">
                <div class="create-content">
                    <div class="content-left">
                        <div class="list_item mt20">
                            <div class="item_title"><span class="title_icon"></span>欢迎语内容配置</div>
                            <MaterialContent
                                ref="materialContentRef"
                                :max-num="8"
                                :is-hidden-label="formData.welcome_type == 3"
                                :input-content-tabs="inputContentTabs"
                                :show-material-tabs="showMaterialTabs"
                                :input-content-data="inputContentData"
                                :material-content-data="materialContentData"
                                :welcome-friend-id="welcomeFriendId"
                                :disabled="pageType === 'look'"
                                :placeholder="'请输入欢迎语'"
                                @change="changeMaterial" />
                            <div v-show="formData.welcome_type == 3" class="item-already" @click="selectAlready">
                                选择已有欢迎语
                            </div>
                        </div>
                    </div>
                    <div class="content-right">
                        <div class="title">欢迎语预览</div>
                        <PhonePreview ref="phonePreviewRef" />
                    </div>
                </div>
            </el-form-item>
        </el-form>

        <!-- 素材标签 -->
        <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getMaterlib" />
    </div>
    <!-- <div class="form_btn">
        <el-button @click="callOff">上一步</el-button>
        <el-button v-if="pageType != 'look'" type="primary" @click="saveWel">保存</el-button>
        <el-button v-else type="primary" @click="saveWel">返回</el-button>
    </div> -->

    <SelectAlreadyMaterial
        ref="selectAlreadyMaterialRef"
        v-model="selectAlreadyMaterialShow"
        @select="selectAlreadyMaterialFn" />
</template>

<script setup lang="ts">
import { reactive, ref, watch, onMounted, computed } from 'vue';
// import ZWMatericalLib from '@/components/channelNew/ZWMatericalLibNew.vue'
import ZWMatericalLib from '@/components/channelNew/ZWMatericalLib.vue';

import ZWPagination from '@/components/ZWPagination.vue';
import ZWEmoji from '@/components/ZWEmoji.vue';
import Dialog from '@/components/Dialog.vue';
import Friend from '../../components/Friend.vue';
import Upload from './ZWUpload.vue';
import MaterialContent from '@/components/zw/materialContent/index.vue';
import PhonePreview from '@/components/zw/phonePreview/welcomePhonePreview/materialPreview/index.vue';

import SelectAlreadyMaterial from '@/components/zw/selectAlreadyMaterial/index.vue';

import {
    getSetionId,
    IsNotEmpty,
    getSuffixIcon,
    useInsertWelcomeContent,
    initMaterialData,
    initAlreadyMaterialData,
    getContentHeight
} from '@/utils/utils';
import { channelFriendList } from '@/api/channel/qwbase';
import { newCode, editCode } from '@/api/smartMarketing/drainage/channelCode/index';
import { useStore } from '@/store';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import router from '@/router';
import bus from '@/utils/bus';

const props = withDefaults(defineProps<{ pageType: string }>(), {
    pageType: 'new'
});
const emit = defineEmits(['callOff']);
const route = useRoute();
const ruleFormRef = ref;
const welcomeList = ref();
const id = ref(route.query.id);
const store = useStore();
const newArr = ref([]);
const multipleTable = ref();
const uId = ref();
const type = ref();
const ZWMatericalLibRef = ref(null);
const BatchLabelRef = ref(null);
const emojiVisible = ref(false);
const fileList = ref([]);
const fileList2 = ref([]);
const uploadList = reactive([
    { id: '2', icon: '/static/file/pic.png', name: '图片' },
    { id: '3', icon: '/static/file/mp3.png', name: '音频' },
    { id: '4', icon: '/static/file/mov.png', name: '视频' },
    { id: '5', icon: '/static/file/ysb.png', name: '文件' },
    { id: '6', icon: '/static/file/link.png', name: '链接' },
    { id: '8', icon: '/static/file/wbgg.png', name: '抽奖' },
    { id: '27', key: '7', icon: '/static/file/form.png', name: '收集表' },
    { id: '99', key: '8', icon: '/static/file/shop.png', name: '电商' },
    { id: '15', icon: '/static/file/official.png', name: '公众号' },
    { id: '11', icon: '/static/file/miniApp.png', name: '小程序' }
]);
const rulesRef = reactive({
    content: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change'
        }
    ]
});
const timeArr = reactive([]);

const materialContentRef = ref<HTMLElement | null>();
const phonePreviewRef = ref<HTMLElement | null>();
const inputContentTabs = ref<Array<number>>([1, 2, 3, 4, 5]); // 配置欢迎语输入框选项
const showMaterialTabs = ref<Array<string>>(['1', '2', '3', '4', '5', '6', '7', '9', '10', '11']); // 配置选择素材组件类型
const inputContentData = ref<string>(''); //  用户存放回显数据  欢迎语输入框
const materialContentData = ref<Array<any>>([]); //  用户存放回显数据  欢迎语素材
const materialResult = ref<any>(null); // 欢迎语组件返回的数据（可直接用于接口请求）

const selectAlreadyMaterialRef = ref<HTMLElement | null>();
const selectAlreadyMaterialShow = ref<boolean>(false);

const tableData = ref([]); //已有欢迎语数据
const seleItem = ref(); // 选中的欢迎语数据

// from 表单收集的数据
const formData = ref({
    welcome_flag: 1, // 是否设置欢迎语
    welcome_type: 2, // 选择欢迎语
    content: '', // 欢迎语文本
    time_welcome_flag: 2, // 是否选择分段欢迎语
    user_id: []
});
const onInsertText = useInsertWelcomeContent('welcomeContent', formData.value, 'content');
const form = reactive({
    images: []
});

const welcomeFriendId = ref<any>('');

// 图片上传
const picInfo = reactive({
    type: 1,
    label: '',
    prop: 'images',
    files: form.images,
    multiple: true,
    limitSize: 10,
    limitNum: 9
});
// 过滤文本
//表情包管理
const chooseEmoji = (emoji: any) => {
    if (formData.value.content.length >= 1000) {
        ElMessage.warning('字数已经超过规定最大字数');
        return;
    }
    //事件。数据包含文本区域的值
    onInsertText(emoji);
    emojiVisible.value = false;
    fileList.value[0] = {
        type: 1,
        content: formData.value.content
    };
};
// 获取已有素材文件列表
const getChannelFriendList = (data?: any) => {
    channelFriendList({
        page: 1,
        page_size: data?.page_size || 15,
        ...data
    }).then((res: any) => {
        tableData.value = res.data;
        store.dispatch('pageTotal', res.total);
    });
};
// 选择已有素材取消
const cancelHandel = () => {
    appDialog.visible = false;
};
// 选择已有素材确认
const submitHandel = () => {
    if (seleItem.value) {
        fileList.value = [];
        fileList2.value = [];
        newArr.value = [];
        if (seleItem.value && seleItem.value.welcome_friend_attachment.length > 0) {
            fileList.value = changeType(seleItem.value.welcome_friend_attachment);
            fileList2.value = changeType(seleItem.value.welcome_friend_attachment);
            newArr.value = changeType(seleItem.value.welcome_friend_attachment);
        }
        const { content } = seleItem.value;
        formData.value.content = content;
        fileList.value.unshift({
            type: 0,
            content: content ? content : ''
        });
    }

    cancelHandel();
};

// 选择已有欢迎语
const selectAlready = (data?: any) => {
    selectAlreadyMaterialShow.value = true;
};

const selectAlreadyMaterialFn = (data: any) => {
    const { content, welcome_friend_attachment, id } = data;
    welcomeFriendId.value = id;
    inputContentData.value = content;
    materialContentData.value = initAlreadyMaterialData(welcome_friend_attachment);
};

// 单选欢迎语
const handleSelectionChange = (selection: any) => {
    if (selection.length > 1) {
        multipleTable.value.clearSelection();
        multipleTable.value.toggleRowSelection(selection.pop());
    } else {
    }
    seleItem.value = selection[0];
};

// 删除上传的文件
const remove = (data: any) => {
    if (props.pageType === 'look') return;
    if (data.code) {
        fileList.value = fileList.value.filter((item: any) => item.code != data.code);
        newArr.value = newArr.value.filter((item: any) => item.code != data.code);
    } else {
        fileList.value = fileList.value.filter((item: any) => item.id != data.id);
        newArr.value = newArr.value.filter((item: any) => item.id != data.id);
    }
    fileList2.value = fileList.value;
};
//打开上传文件弹框
const openUpload = (num: string, flag = false) => {
    if (props.pageType == 'look') return;
    if (flag) {
        const showTabs = ['1'];
        ZWMatericalLibRef.value.showTabs = showTabs;
        ZWMatericalLibRef.value.baseId = num;
        ZWMatericalLibRef.value.materVisible = true;
    } else {
        const showTabs = ['2', '4', '1', '3', '5', '6', '8', '27', '99', '15', '11'];
        if (num == '15') {
            ZWMatericalLibRef.value.multiple = false;
        }
        ZWMatericalLibRef.value.showTabs = showTabs;
        ZWMatericalLibRef.value.localUploadisShow = ['2', '3', '4', '5', '6'];
        ZWMatericalLibRef.value.materVisible = true;
        ZWMatericalLibRef.value.baseId = num; //打开对应的基础素材
        ZWMatericalLibRef.value.existFile = Number(9 - fileList.value.length); //打开对应的基础素材
    }
};
// 插入名字
const insetName = (text: string) => {
    if (formData.value.content.length >= 1000) {
        ElMessage.warning('字数已经超过规定最大字数');
        return;
    }
    onInsertText(text);
    if (fileList.value.length > 0) {
        if (fileList.value[0].type == 0) {
            fileList.value[0] = {
                type: 0,
                content: formData.value.content
            };
        } else {
            fileList.value.unshift({
                type: 0,
                content: formData.value.content
            });
        }
    } else {
        fileList.value.unshift({
            type: 0,
            content: formData.value.content
        });
    }
};

//更改欢迎语
const changeWords = () => {
    if (formData.value.content.length > 1000) {
        ElMessage.warning('字数已经超过规定最大字数');
        return;
    }
    if (fileList.value.length > 0) {
        if (fileList.value[0].type == 0) {
            fileList.value[0] = {
                type: 0,
                content: formData.value.content
            };
        } else {
            fileList.value.unshift({
                type: 0,
                content: formData.value.content
            });
        }
    } else {
        fileList.value.unshift({
            type: 0,
            content: formData.value.content
        });
    }
};
// 获取选择的信息
const getMaterlib = (res: any, local = false) => {
    if (formData.value.content.length >= 1000) {
        ElMessage.warning('字数已经超过规定最大字数');
        return;
    }
    if (local) {
        const result = [];
        if (res.data.length > 0) {
            res.data.forEach((item: any) => {
                item.type = res.type;
                item.user_name = '张三';
                result.push(item);
            });
            fileList.value = fileList.value.concat(changeLocalType(result));
        }
    } else if (res instanceof Array) {
        if (res[0].type == 0) {
            let str = '';
            res[0].data.map((item: any) => {
                str += item.content;
            });
            onInsertText(str);
            // form.content = form.content.substr(0, 1000)
            changeWords();
        } else {
            const result = [];
            if (res.length > 0) {
                res.forEach(ite => {
                    ite.data.forEach((item: any) => {
                        item.type = ite.type;
                        item.user_name = '张三';
                        result.push(item);
                    });
                });
            }
            fileList.value = fileList.value.concat(changeType(result));
        }
    }
    newArr.value = fileList.value.filter((item: any) => {
        return item.type != 0;
    });
};
// 转换本地上传的数据
const changeLocalType = (data: any[]) => {
    const result = [];
    if (data.length > 0) {
        data.forEach((item: any) => {
            // 图片
            if (item.type == 1) {
                item.cur_icon = '/static/file/pic.png';
                // eslint-disable-next-line no-self-assign
                item.name = item.name;
                item.absolute_url = item.url;
            }
            ///视频
            if (item.type == 2) {
                item.cur_icon = '/static/file/mov.png';
                // eslint-disable-next-line no-self-assign
                item.name = item.name;
            }
            // 链接
            if (item.type == 3) {
                item.cur_icon = '/static/file/link.png';
                item.name = item.title;
            }
            // 音频
            if (item.type == 4) {
                item.cur_icon = '/static/file/mp3.png';
                // eslint-disable-next-line no-self-assign
                item.name = item.name;
                item.title = item.name;
            }
            // 文件
            if (item.type == 5) {
                item.cur_icon = '/static/file/mp3.png';
                // eslint-disable-next-line no-self-assign
                item.name = item.name;
            }
            item.is_local = true;
            result.push(item);
        });
    }
    return result;
};
// 转换选中信息
const changeType = (data: any[]) => {
    const result = [];
    if (data.length > 0) {
        data.forEach((item: any) => {
            // 图片
            if (item.type == 1) {
                item.cur_icon = '/static/file/pic.png';
                item.name = item.file_name ? item.file_name : item.media_file.name;
                item.absolute_url = item.absolute_url ? item.absolute_url : item.media_file.absolute_url;
                result.push(item);
            }
            ///视频
            if (item.type == 2) {
                item.cur_icon = '/static/file/mov.png';
                item.name = item.file_name ? item.file_name : item.media_file.name;
                item.thumbnail_url = item.thumbnail_url
                    ? item.thumbnail_url
                    : `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`;
                result.push(item);
            }
            // 链接
            if (item.type == 3) {
                item.cur_icon = '/static/file/link.png';
                item.name = item.title || item.link_title;
                item.title = item.title || item.link_title;
                item.cover_image_url = item.cover_image_url || item.link_share_image;
                result.push(item);
            }
            // 音频
            if (item.type == 4) {
                item.cur_icon = '/static/file/mp3.png';
                item.name = item.file_name ? item.file_name : item.media_file.name;
                result.push(item);
            }
            // 文件
            if (item.type == 5) {
                item.cur_icon = getSuffixIcon(item.mediaFileInfo?.absolute_url || item.media_file.absolute_url);
                item.name = item.mediaFileInfo?.name ? item.mediaFileInfo?.name : item.media_file.name;
                item.title = item.mediaFileInfo?.name ? item.mediaFileInfo?.name : item.media_file.name;
                result.push(item);
            }
            // 抽奖
            if (item.type == 6) {
                item.cur_icon = '/static/file/wbgg.png';
                item.name = item.activity_name;
                result.push(item);
            } // 电商素材--电商产品
            if (item.type == 7) {
                item.cur_icon = '/static/file/shop.png';
                item.name = item.retail_product
                    ? item.retail_product.product_name
                    : item.product_name
                    ? item.product_name
                    : item.page_name;
                result.push(item);
            }
            // 电商素材--页面素材
            if (item.type == 8) {
                item.cur_icon = '/static/file/shop.png';
                item.name = item.page_name ? item.page_name : item.product_name;
                result.push(item);
            }
            // 收集表
            if (item.type == 9) {
                item.cur_icon = '/static/file/form.png';
                item.name = item.title || item.collect_form.title;
                result.push(item);
            }
            // 图文公众号
            if (item.type == 10) {
                if (item.article_detail) {
                    if (item.article_detail.length > 1) {
                        item.article_detail.slice(0, 8).forEach((item: any) => {
                            if (item.type == 5) {
                                result.push({
                                    type: 10,
                                    cur_icon: '/static/file/pic.png',
                                    name: '图片',
                                    id: item.id
                                });
                            } else if (item.type == 3) {
                                result.push({
                                    type: 10,
                                    cur_icon: '/static/file/mov.png',
                                    name: '视频',
                                    id: item.id
                                });
                            } else if (item.type == 4) {
                                result.push({
                                    type: 10,
                                    cur_icon: '/static/file/mp3.png',
                                    name: '音频',
                                    id: item.id
                                });
                            } else {
                                result.push({
                                    type: 10,
                                    cur_icon: '/static/file/official.png',
                                    name: item.title,
                                    id: item.id
                                });
                            }
                        });
                    } else {
                        if (item.article_detail[0].type == 5) {
                            result.push({
                                type: 10,
                                cur_icon: '/static/file/pic.png',
                                name: '图片',
                                id: item.article_detail[0].id
                            });
                        } else if (item.article_detail[0].type == 3) {
                            result.push({
                                type: 10,
                                cur_icon: '/static/file/mov.png',
                                name: '视频',
                                id: item.article_detail[0].id
                            });
                        } else if (item.article_detail[0].type == 4) {
                            result.push({
                                type: 10,
                                cur_icon: '/static/file/mp3.png',
                                name: '音频',
                                id: item.article_detail[0].id
                            });
                        } else if (item.article_detail[0].type == 2) {
                            result.push({
                                type: 10,
                                cur_icon: '/static/file/text.png',
                                name: item.article_detail[0].title,
                                id: item.article_detail[0].id
                            });
                        } else {
                            result.push({
                                type: 10,
                                cur_icon: item.article_detail[0].cover,
                                name: item.article_detail[0].title,
                                id: item.article_detail[0].id
                            });
                        }
                    }
                } else {
                    if (item.official_article.type == 5) {
                        result.push({
                            type: 10,
                            cur_icon: '/static/file/pic.png',
                            name: '图片',
                            id: item.official_article.id
                        });
                    } else if (item.official_article.type == 3) {
                        result.push({
                            type: 10,
                            cur_icon: '/static/file/mov.png',
                            name: '视频',
                            id: item.official_article.id
                        });
                    } else if (item.official_article.type == 4) {
                        result.push({
                            type: 10,
                            cur_icon: '/static/file/mp3.png',
                            name: '音频',
                            id: item.official_article.id
                        });
                    } else if (item.official_article.type == 2) {
                        result.push({
                            type: 10,
                            cur_icon: '/static/file/text.png',
                            name: item.official_article.content,
                            id: item.official_article.id
                        });
                    } else {
                        result.push({
                            type: 10,
                            cur_icon: item.official_article.cover,
                            name: item.official_article.content,
                            id: item.official_article.id
                        });
                    }
                }
            }
            // 小程序
            if (item.type == 11) {
                item.cur_icon = '/static/file/miniApp.png';
                item.name = item.title || item.miniprogram.title;
                item.imgUrl = item.image_url || item.miniprogram.image_url;
                result.push(item);
            }
        });
    }
    return result;
};
const addTime = () => {
    timeArr.push({
        id: timeArr.length,
        week: [],
        send_time: [],
        type: 1,
        content: '',
        attachment: [],
        local_link: [],
        local_content: [],
        retail_material: [],
        collect_form: [],
        activity: []
    });
};
const del = (data: any) => {
    timeArr.splice(timeArr.indexOf(data.id), 1);
};
const getFileList = (data: any) => {
    data = data.filter((item: any) => IsNotEmpty(item));
    if (data.length > 0) {
        form.images = getSetionId('code', data);
    }
};
// 弹框配置项
const appDialog = reactive({
    visible: false,
    title: '选择已有欢迎语',
    width: '1200px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
});
const result = reactive({
    welcome_flag: formData.value.welcome_flag,
    welcome_type: formData.value.welcome_type,
    welcome_content: formData.value.content,
    welcome_attachment: [],
    retail_material: [],
    collect_form: [],
    activity: [],
    article: [],
    local_link: [],
    local_content: [],
    time_welcome_flag: formData.value.time_welcome_flag,
    time_welcome: []
});
// 欢迎语数据转换
const welDataBase = (data?: any) => {
    result.welcome_attachment = [];
    result.retail_material = [];
    result.collect_form = [];
    fileList.value.forEach((item: any) => {
        if (item.type != 0) {
            if (item.is_local || item.content_id == 0) {
                if (item.type == 6 || item.type == 3) {
                    result.local_link.push({
                        link_title: item.title,
                        link_url: item.link_url,
                        link_decs: item.link_desc,
                        link_share_image: item.cover_image_url
                    });
                } else {
                    result.local_content.push({
                        code: item.code || item.media_file.code,
                        type: item.type
                    });
                }
            } else {
                if (item.type == 6) {
                    result.activity.push({
                        type: item.type,
                        id: item.id
                    });
                } else if ([7, 8].includes(item.type)) {
                    result.retail_material.push({
                        type: item.type,
                        id: item.content_id ? item.content_id : item.id
                    });
                } else if (item.type == 9) {
                    result.collect_form.push({
                        type: item.type,
                        id: item.content_id ? item.content_id : item.id
                    });
                } else if (item.type == 10) {
                    result.article.push({ type: item.type, id: item.id });
                } else {
                    result.welcome_attachment.push({
                        media_content_id: item.content_id ? item.content_id : item.id,
                        type: item.type
                    });
                    // }
                }
            }
        }
    });
};

const changeMaterial = (val: any) => {
    materialResult.value = val;
};

// 保存
const saveWel = () => {
    result.welcome_flag = formData.value.welcome_flag;
    result.welcome_type = formData.value.welcome_type;
    result.welcome_content = formData.value.content;
    result.time_welcome_flag = formData.value.time_welcome_flag;
    if (props.pageType === 'edit') {
        result.activity_id = id.value;
        bus.emit('dispose');
    }
    welDataBase();
    timeArr.forEach((item: any) => {
        const tArr = [];
        item.attachment.map((i: any) => {
            if (i.media_content_id) {
                tArr.push(i);
            }
        });
        result.time_welcome.push({
            week: item.week,
            type: item.type,
            send_time: item.send_time,
            content: item.content,
            attachment: tArr,
            local_link: item.local_link,
            local_content: item.local_content,
            retail_material: item.retail_material,
            collect_form: item.collect_form,
            activity: item.activity
        });
    });
    const wArr: any = [];
    result.welcome_attachment.map((item: any) => {
        const arr = [];
        if (item.media_content_id) {
            wArr.push(item);
        }
    });
    if (wArr.length != 0) result.welcome_attachment = wArr;
    const data = store.state.groupCode.newCode;
    let newParams = Object.assign(result, data);
    // 新增/编辑/返回时，携带当前分组ID
    const params = { group_id: newParams.group_id };
    // return
    // if (formData.value.content == '' && formData.value.welcome_type !== 2) {
    //   ElMessage.warning('请填写欢迎语内容')
    //   return
    // }

    if (
        formData.value.welcome_flag != 2 &&
        formData.value.welcome_type !== 2 &&
        materialResult.value?.welcome_info?.welcome_text == ''
    ) {
        ElMessage.warning('请填写欢迎语内容');
        return;
    }
    if (formData.value.welcome_type == 2) {
        materialResult.value = {
            welcome_info: {
                welcome_local_link: [],
                welcome_local_upload: [],
                welcome_material: [],
                welcome_text: '',
                welcome_friend_id: 0
            }
        };
    }
    if (formData.value.welcome_flag == 2) {
        materialResult.value = {
            welcome_info: []
        };
    }
    if (props.pageType == 'look') {
        router.push({ name: 'SMART_MARKETING_DRAINAGE_CHANNEL_CODE', params, query: params });
    } else if (props.pageType == 'edit') {
        const editParams = { ...result, ...materialResult.value };
        editCode(editParams)
            .then((res: any) => {
                ElMessage.success('保存成功');
                router.push({ name: 'SMART_MARKETING_DRAINAGE_CHANNEL_CODE', params, query: params });
            })
            .catch((err: any) => {
                return;
            });
    } else {
        newParams = { ...newParams, ...materialResult.value };
        newCode(newParams)
            .then((res: any) => {
                ElMessage.success('保存成功');
                router.push({ name: 'SMART_MARKETING_DRAINAGE_CHANNEL_CODE', params, query: params });
            })
            .catch((err: any) => {
                return;
            });
    }
};
//取消
const callOff = () => {
    // router.push({ path: "/smartMarketing/drainage/channelCode" });
    emit('callOff');
};
//获取文件类型
const url = (data: any) => {
    const fileTYpe = {
        '.pdf': '/static/file/pdf.png',
        '.doc': '/static/file/doc.png',
        '.docx': '/static/file/doc.png',
        '.xls': '/static/file/xls.png',
        '.xlsx': '/static/file/xls.png',
        '.ppt': '/static/file/ppt.png',
        '.pptx': '/static/file/ppt.png'
    };
    if (data.name.substring) {
        const last = data.name.substring(data.name.lastIndexOf('.'));
        return fileTYpe[last] || '/static/file/file.png';
    }
};

const getLook = () => {
    const activityInfo = store.state.groupCode.lookList;
    if ((activityInfo && props.pageType == 'look') || props.pageType == 'edit') {
        formData.value.welcome_flag = activityInfo.welcome_flag;
        formData.value.welcome_type = activityInfo.welcome_type;

        // 一下为模拟编辑时回显的数据 真实联调时请使用接口数据
        inputContentData.value = activityInfo.welcome_info.welcome_text;
        materialContentData.value = initMaterialData(activityInfo.welcome_info.welcome_material);
        welcomeFriendId.value = activityInfo.welcome_info.welcome_friend_id;

        formData.value.content = activityInfo.welcome_content;
        formData.value.time_welcome_flag = activityInfo.time_welcome_flag;
        fileList.value.push({ type: 0, content: activityInfo.welcome_content });
        if (activityInfo.welcome_attachment) {
            const pdr = [];
            activityInfo.welcome_attachment.forEach((item: any) => {
                if (item.type == 1) {
                    item.cur_icon = '/static/file/pic.png';
                    item.name = item.media_file.name;
                    item.absolute_url = item.media_file.absolute_url;
                    pdr.push(item);
                }
                if (item.type == 2) {
                    item.cur_icon = '/static/file/mov.png';
                    item.name = item.media_file.name;
                    item.thumbnail_url = `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast`;
                    pdr.push(item);
                }
                if (item.type == 3) {
                    item.cur_icon = '/static/file/link.png';
                    item.title = item.link_title;
                    item.name = item.link_title;
                    item.cover_image_url = item.media_content_link.cover_image_url;
                    pdr.push(item);
                }
                if (item.type == 4) {
                    item.cur_icon = '/static/file/mp3.png';
                    item.title = item.media_file.name;
                    item.name = item.media_file.name;
                    pdr.push(item);
                }
                if (item.type == 5) {
                    item.cur_icon = getSuffixIcon(item.media_file?.absolute_url);
                    item.name = item.media_file.name;
                    item.title = item.media_file.name;
                    pdr.push(item);
                }
                if (item.type == 6) {
                    item.cur_icon = '/static/file/wbgg.png';
                    item.name = item.link_title;
                    item.title = item.link_title;
                    item.id = item.content_id;
                    pdr.push(item);
                }
                if ([7, 8].includes(item.type)) {
                    item.cur_icon = '/static/file/shop.png';
                    item.name = item.link_title;
                    item.title = item.link_title;
                    pdr.push(item);
                }
                if (item.type == 9) {
                    item.cur_icon = '/static/file/form.png';
                    item.name = item.link_title;
                    item.title = item.link_title;
                    item.id = item.content_id;
                    pdr.push(item);
                }
                if (item.type == 10) {
                    if (item.article_type == 5) {
                        pdr.push({
                            type: 10,
                            cur_icon: '/static/file/pic.png',
                            name: '图片',
                            id: item.content_id
                        });
                    } else if (item.article_type == 3) {
                        pdr.push({
                            type: 10,
                            cur_icon: '/static/file/mov.png',
                            name: '视频',
                            id: item.content_id
                        });
                    } else if (item.article_type == 4) {
                        pdr.push({
                            type: 10,
                            cur_icon: '/static/file/mp3.png',
                            name: '音频',
                            id: item.content_id
                        });
                    } else if (item.article_type == 2) {
                        pdr.push({
                            type: 10,
                            cur_icon: '/static/file/text.png',
                            name: item.link_title,
                            id: item.content_id
                        });
                    } else {
                        item.cur_icon = item.link_share_image;
                        item.name = item.link_title;
                        item.title = item.link_title;
                        item.id = item.content_id;
                        pdr.push(item);
                    }
                }
                if (item.type == 11) {
                    (item.cur_icon = '/static/file/miniApp.png'), (item.name = item.link_title);
                    item.id = item.content_id;
                    item.imgUrl = item.link_share_image;
                    pdr.push(item);
                }
            });
            fileList.value = pdr;
            if (activityInfo.welcome_content != '') {
                fileList.value.unshift({
                    type: 0,
                    content: activityInfo.welcome_content
                });
            }
            fileList2.value = pdr;
            newArr.value = pdr;
        }
        if (activityInfo.time_welcome) {
            activityInfo.time_welcome.forEach((item: any, index: any) => {
                timeArr.push({
                    id: index,
                    week: item.week ? item.week : [],
                    send_time: item.send_time ? item.send_time : [],
                    type: item.type,
                    content: item.content,
                    attachment: item.attachment,
                    local_link: [],
                    local_content: []
                });
            });
        }
    }
};
watch(
    () => props.pageType,
    val => {
        type.value = val;
    },
    { deep: true, immediate: true }
);
// watch(
//   () => formData.value.content,
//   (newValue, oldValue) => {
//     if (newValue.length > 1000) {
//       formData.value.content = oldValue
//     }
//   },
//   { deep: true, immediate: true }
// )

const contentHeight = computed(() => getContentHeight(350));
defineExpose({
    callOff,
    saveWel
});
onMounted(() => {
    getLook();
});
</script>

<style lang="scss" scoped>
.pop_select_box {
    height: 84px;

    .upload_btn {
        margin-top: 8px;
    }

    .upload_pop {
        background: #fff;
        border-radius: 12px;

        // box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
        display: flex;
        align-items: center;
        justify-content: space-around;

        .item_pop {
            width: 60px;
            height: 62px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            cursor: pointer;

            .item_pop_icon {
                width: 40px;
            }

            .item_pop_name {
                font-size: 14px;
                white-space: nowrap;
                margin-top: 2px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #1a1918;
            }
        }
    }
}

.welcome {
    // :deep(.formRef) {
    // width: 100%;
    // height: calc(100vh - 300px);
    // height: v-bind(contentHeight);
    // overflow: auto;
    // }
    background-color: #fff;

    .el-form-item {
        margin-bottom: 0;
    }

    .create {
        display: flex;
        justify-content: space-between;

        // padding-bottom: 100px;
        .list_item {
            padding-left: 18px;
            padding-right: 132px;
            border-right: 1px solid #eaeaea;

            .item_title {
                font-size: 14px;
                line-height: 18px;
                font-family: STHeitiSC-Medium, STHeitiSC;
                font-weight: 500;
                color: #33302d;
                margin-bottom: 16px;

                .title_icon {
                    display: block;
                    height: 18px;
                    width: 3px;
                    background: #ff6b00;
                    float: left;
                    margin-left: -15px;
                }
            }

            .input_content {
                position: relative;

                .item_con_input {
                    width: 470px;
                }

                .input_textarea {
                    width: 100%;

                    :deep(.el-textarea__inner) {
                        height: 170px;
                        background: #f8f8f8;
                        border: 0;
                        box-shadow: none;
                        border-bottom: 1px solid #eaeaea;
                        padding: 5px 0;
                    }
                }

                .item_num {
                    position: absolute;
                    bottom: -5px;
                    right: 0;
                }
            }

            .item_con {
                .radio_group {
                    margin-right: 15px;
                }

                .cus_type_0 {
                    margin-top: 20px;
                    font-size: 14px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #33302d;

                    span {
                        color: #ff6b00;
                    }
                }

                .form_cus_type {
                    margin-top: 5px;

                    .el-form-item__content {
                        .form_item_input {
                            .el-input__inner {
                                width: 253px !important;
                            }
                        }
                    }
                }
            }

            .item_message_box {
                background: #f8f8f8;
                border: 1px solid #eaeaea;
                border-radius: 4px;
                width: 580px;
                height: 380px;
                position: relative;

                .simple_fn {
                    margin-top: 5px;
                    display: flex;
                    align-items: center;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #33302d;
                    padding-bottom: 6px;
                    border-bottom: 1px solid #eaeaea;

                    .cus_name {
                        margin-right: 18px;
                        color: #ff6b00;
                        cursor: pointer;
                    }

                    .emoj {
                        margin-left: 5px;
                        cursor: pointer;
                    }

                    .sele_text {
                        cursor: pointer;
                    }
                }

                .upload_list_box {
                    overflow: hidden;
                    height: 135px;
                }

                .upload_list {
                    .upload_item {
                        margin-top: 5px;
                        width: 440px;
                        height: 32px;
                        box-sizing: border-box;
                        background: #eaeaea;
                        display: flex;
                        padding: 0 10px 0 14px;
                        align-items: center;

                        .file_icon {
                            width: 20px;
                            height: 20px;
                            margin-right: 7px;
                        }

                        .file_name {
                            width: 375px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }

                        .del_icon {
                            width: 10px;
                            height: 10px;
                            cursor: pointer;
                        }
                    }
                }

                .upload_btn {
                    display: inline-block;
                    margin-left: 12px;
                    position: relative;
                    top: -25px;
                    line-height: 32px;
                    background: #f8f8f8;
                    border: 1px solid #d9d9d9;
                    padding: 0 12px;
                    box-sizing: border-box;
                    font-size: 14px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #969696;

                    .addIcon {
                        position: absolute;
                        top: 30%;
                    }

                    .upload_text {
                        margin-left: 20px;
                    }
                }

                .upload_pop {
                    position: absolute;
                    bottom: 50px;
                    left: -20px;
                    width: 360px;
                    height: 84px;
                    background: #fff;
                    border-radius: 12px;
                    box-shadow: 0 2px 4px 0 rgb(216 216 216 / 50%);
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    .item_pop {
                        width: 60px;
                        height: 62px;
                        background: #fff;
                        border-radius: 6px;
                        border: 1px solid #f9f9f9;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        cursor: pointer;

                        .item_pop_icon {
                            width: 40px;
                        }

                        .item_pop_name {
                            font-size: 14px;
                            margin-top: 2px;
                            font-family: PingFangSC-Regular, 'PingFang SC';
                            font-weight: 400;
                            color: #1a1918;
                        }
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -10px;
                        left: 50%;
                        transform: translate(-50%);
                        width: 0;
                        height: 0;
                        border-left: 10px solid transparent;
                        border-right: 10px solid transparent;
                        border-top: 10px solid #fff;
                    }
                }

                .emoj_box {
                    width: 270px;
                    position: absolute;
                    top: -40px;
                }
            }
        }

        .prev_box {
            flex: 1;

            .phone_con {
                // justify-content: center;
                position: relative;
                margin: -20px auto;
                width: 244px;
                height: 495px;
                box-sizing: border-box;
                border-radius: 36px;
                border: 9px solid #eef5fe;
                background: url('@/assets/image/channel/phone_bg.png');
                background-size: cover;

                .phone-title {
                    position: absolute;
                    top: -40px;
                    left: 75px;
                }

                .phone_List {
                    width: 100%;
                    box-sizing: border-box;
                    position: absolute;
                    top: 48px;
                    height: 380px;
                    bottom: 48px;
                    padding: 7px 10px;
                }
            }
        }
    }

    .create-content {
        padding: 20px;
        box-sizing: border-box;
        display: flex;

        .content-left {
            flex: 1;
            padding-right: 48px;
            border-right: 1px solid #eee;

            .list_item {
                padding-left: 1.125rem;
                padding-bottom: 24px;
                border-bottom: 0.0625rem solid #eaeaea;

                &:last-of-type {
                    border-bottom: none;
                }

                .item_title {
                    font-size: 0.875rem;
                    line-height: 1.125rem;
                    font-family: STHeitiSC-Medium, STHeitiSC;
                    font-weight: 500;
                    color: #33302d;
                    margin-bottom: 12px;

                    .title_icon {
                        display: block;
                        height: 1.125rem;
                        width: 0.1875rem;
                        background: #ff6b00;
                        float: left;
                        margin-left: -0.9375rem;
                    }
                }

                .item-already {
                    color: #ff6b00;
                    width: 120px;
                    margin-top: 20px;
                    margin-left: 0;
                    cursor: pointer;
                    line-height: 36px;
                    text-align: center;
                    border: 1px solid #ff6b00;
                    border-radius: 4px;
                }

                .item_con_input {
                    width: 29.375rem;
                }

                .item_con {
                    .radio_group {
                        margin-right: 0.9375rem;
                    }

                    .cus_type_0 {
                        margin-top: 1.25rem;
                        font-size: 0.875rem;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #33302d;

                        span {
                            color: #ff6b00;
                        }
                    }

                    .form_cus_type {
                        margin-top: 0.3125rem;

                        .el-form-item__content {
                            .form_item_input {
                                .el-input__inner {
                                    width: 15.8125rem !important;
                                }
                            }
                        }
                    }

                    .input_textarea {
                        width: 100%;

                        :deep .el-textarea__inner {
                            height: 10.625rem;
                            background: #f8f8f8;
                            border: 0;
                            border-bottom: 0.0625rem solid #eaeaea;
                            padding: 0.3125rem 0;
                        }
                    }
                }

                .item_message_box {
                    background: #f8f8f8;
                    border: 0.0625rem solid #eaeaea;
                    border-radius: 0.25rem;
                    width: 36.25rem;
                    height: 23.75rem;
                    position: relative;

                    .simple_fn {
                        margin-top: 0.3125rem;
                        display: flex;
                        align-items: center;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #33302d;
                        padding-bottom: 0.375rem;
                        border-bottom: 0.0625rem solid #eaeaea;

                        .cus_name {
                            margin-right: 1.125rem;
                            color: #ff6b00;
                            cursor: pointer;
                        }

                        .emoj {
                            margin-left: 0.3125rem;
                            cursor: pointer;
                        }

                        .sele_text {
                            cursor: pointer;
                        }
                    }

                    .upload_list_box {
                        overflow: hidden;
                        height: 8.4375rem;
                    }

                    .upload_list {
                        .upload_item {
                            margin-top: 0.3125rem;
                            width: 27.5rem;
                            height: 2rem;
                            box-sizing: border-box;
                            background: #eaeaea;
                            display: flex;
                            padding: 0 0.625rem 0 0.875rem;
                            align-items: center;

                            .file_icon {
                                width: 1.25rem;
                                height: 1.25rem;
                                margin-right: 0.4375rem;
                            }

                            .file_name {
                                width: 23.4375rem;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }

                            .del_icon {
                                width: 0.625rem;
                                height: 0.625rem;
                                cursor: pointer;
                            }
                        }
                    }

                    .upload_btn {
                        margin-top: 8px;
                        width: 420px;
                        height: 32px;
                        background: #f8f8f8;
                        border: 0.0625rem solid #d9d9d9;
                        padding: 0 0.75rem;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        font-size: 0.875rem;
                        font-family: STHeitiSC-Light, STHeitiSC;
                        font-weight: 300;
                        color: #969696;

                        .upload_text {
                            margin-left: 0.5rem;
                        }
                    }

                    .upload_pop {
                        position: absolute;
                        bottom: 3.125rem;
                        left: -1.25rem;
                        width: 22.5rem;
                        height: 5.25rem;
                        background: #fff;
                        border-radius: 0.75rem;
                        box-shadow: 0 0.125rem 0.25rem 0 rgb(216 216 216 / 50%);
                        display: flex;
                        align-items: center;
                        justify-content: space-around;

                        .item_pop {
                            width: 3.75rem;
                            height: 3.875rem;
                            background: #fff;
                            border-radius: 0.375rem;
                            border: 0.0625rem solid #f9f9f9;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;
                            cursor: pointer;

                            .item_pop_icon {
                                width: 2.5rem;
                            }

                            .item_pop_name {
                                font-size: 0.875rem;
                                margin-top: 0.125rem;
                                font-family: PingFangSC-Regular, 'PingFang SC';
                                font-weight: 400;
                                color: #1a1918;
                            }
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            bottom: -0.625rem;
                            left: 50%;
                            transform: translate(-50%);
                            width: 0;
                            height: 0;
                            border-left: 0.625rem solid transparent;
                            border-right: 0.625rem solid transparent;
                            border-top: 0.625rem solid #fff;
                        }
                    }

                    .emoj_box {
                        width: 16.875rem;
                        position: absolute;
                        top: -2.5rem;
                    }
                }
            }

            .mt20 {
                margin-top: 1.25rem;
            }
        }

        .content-right {
            padding: 0 24px 0 48px;

            .title {
                text-align: center;
                line-height: 3.5;
                font-size: 14px;
                color: #333;
            }
        }
    }

    .already {
        color: #ff6b00;
        width: 120px;
        margin-left: 1.125rem;
        cursor: pointer;
        line-height: 36px;
        text-align: center;
        border: 1px solid #ff6b00;
        border-radius: 4px;
    }

    .timeTitle {
        display: flex;
        align-items: center;
        background: #fffaf9;
        width: 580px;
        line-height: 40px;
        padding: 0 20px;
        margin-bottom: 23px;

        &_icon {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ff6b00;
            margin-right: 10px;
        }
    }

    .addTime {
        text-align: center;
        font-size: 14px;
        border-radius: 1px;
        cursor: pointer;
        margin: -60px 0 0 20px;
    }

    .code {
        width: 260px;
        height: 260px;
        background: #fff;
        box-shadow: 0 12px 48px 1px rgb(0 0 0 / 3%);
        border-radius: 10px;
        opacity: 1;
        border: 1px solid #eaeaea;
        margin-right: 25px;
    }

    .form_upload {
        display: flex;
        align-items: flex-end;
    }

    .warn {
        color: #969696;
        font-size: 12px;
    }
}

.form_btn {
    margin-top: 20px;
    margin-bottom: 20px;
    background: #fff;
    text-align: center;
    position: absolute;
    bottom: 0;
    padding: 10px;
    left: 20px;
    right: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    border-radius: 1px;
    opacity: 1;
    border: 1px solid #eaeaea;
}

.table_header_title {
    height: 60px;

    th.el-table__cell {
        background: #f9f9f9;
        padding: 10px 0;
    }
}

.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 240px;
}

.addTop {
    margin-top: 10px !important;
}

.alias {
    margin-left: 15px;
}
</style>
